<template>
  <div>
    <div style='width:100%;height:230px' v-bind:id='id'></div>
    <span>{{ testdata2.name }}</span>
  </div>
</template>

<script>
import Echarts from 'echarts';
var echart1 = null;
export default {
  name: 'test',
  data () {
    return {
      d1: Number(1 === true),
      testdata2: { name: 'haha' }
    };
  },
  props: ['id', 'tdata'],
  methods: {
    getOption (d) {
      var option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        color: ['#e381f5', '#1784ff'],
        legend: {
          // orient: 'vertical',
          x: 'center',
          y: 'bottom',
          data: d[0]
        },
        series: [
          {
            name: '电桩分类',
            type: 'pie',
            radius: ['0%', '70%'],
            center: ['50%', '45%'],
            // avoidLabelOverlap: false,
            // roseType : 'radius',
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '30',
                  color: '#fff',
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: d[1]
          }
        ]
      };

      return option;
    }
  },
  mounted () {
    // console.log('组件初始化完毕');
    this.testdata2.name = '';
    echart1 = Echarts.init(document.getElementById(this.id));
  },
  beforeUpdate () {
    // console.log('组件即将改变前触发，常用',this.id,this.tdata);
    // console.log(this.tdata)
    var option = this.getOption(this.tdata);
    if (option) {
      echart1.setOption(option, true);
    }
  },
  watch: {
    tdata: function (d) {
      var option = this.getOption(d);
      echart1.setOption(option, true);
    }
  },
  computed: {
    comp1 () {
      return `${this.d1}`;
    }
  }
};
</script>
